<template>
  <view :="fv.rootProps">
    <view :class="[ns.e('progress')]">
      <view :class="[ns.e('progress-color')]">
        <view :class="[ns.e('progress-striped')]"></view>
      </view>
    </view>
    <view :class="[ns.e('text')]">
      <view :class="[ns.e('text-left')]">{{ current }}</view>
      <view :class="[ns.e('text-center')]">/</view>
      <view :class="[ns.e('text-right')]">{{ total }}</view>
      <view :class="[ns.e('text-percentage')]">{{ fv.percentage }}%</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { isEmpty, useNamespace } from '@/utils';
import Progress from '.';
import { computed } from 'vue';
import Decimal from 'decimal.js';

defineOptions({
  name: Progress.name
})
const props = defineProps(Progress.props)
const ns = useNamespace(Progress.name)
const fv = computed(() => {
  const MAX = 100
  let percentage = isEmpty(props.percentage) 
    ? props.current === props.total 
      ? MAX 
      : new Decimal(props.current).div(props.total).mul(100).toNumber()
    : props.percentage
  percentage = Math.min(MAX, Math.max(0, percentage))
  const rootProps = {
    class: [
      ns.b,
      props.showText && 'show-text',
      props.showPercentageText && 'show-percentage',
      props.striped && 'is-striped',
      props.stripedFlow && 'is-striped-flow'
    ].concat([
      props.textPosition,
    ].filter(Boolean).map(item => ns.b + '--' + item)),
    'data-current': props.current,
    'data-total': props.total,
    style: {
      '--progress-percentage': percentage
    }
  }

  if(!isEmpty(props.precision)) {
    const [intger, decimal] = String(percentage).split('.')
    percentage = +(intger + '.' + (decimal?.slice(0, props.percentage) ?? ''))
  }
  
  return {
    rootProps,
    percentage
  }
})
</script>